<template>
	<view class="login-page" :style="{height:screenHeight+'px'}">
		<view>
			<view class="head">
				<text class="title main-text-color">一键登录，尝鲜各地水果</text>
				<!-- <text class="subtitle">{{subTitle}}</text> -->
			</view>
			<view class="body">
				<template v-if="type == 'h5login'">
					<view class="input-box flex">
						<view class="area-code main-text-color">+86</view>
						<input type="text" class="phone main-text-color" placeholder="请输入手机号码" v-model="form.mobile"/>
					</view>
					<view class="input-box flex">
						<input type="password" :maxlength="16" class="code main-text-color" placeholder="请输入登录密码" v-model="form.password"/>						
					</view>
					<!-- <view class="input-box flex">
						<input type="text" class="code main-text-color" placeholder="请输入验证码" v-model="form.password"/>
						<view class="code-btn main-text-color">获取验证码</view>
					</view> -->
				</template>
				<template v-else-if="type == 'register'">
					<view class="input-box flex">
						<view class="area-code main-text-color">+86</view>
						<input type="text" class="phone main-text-color" placeholder="请输入手机号码" v-model="registerForm.mobile"/>
					</view>
					<view class="input-box flex">
						<input type="password" :maxlength="16" class="code main-text-color" placeholder="请输入登录密码" v-model="registerForm.password"/>						
					</view>
				</template>
				<template v-else>
					<view class="flex align-center justify-center submit-btns">
						<view class="main-bg-color rounded flex align-center justify-center flex-1"
						hover-class="main-bg-hover-color" @click="wxLogin">
							<text class="text-white font-md">一键登录</text>
						</view>				
					</view>			
					<!-- <view class="wxlogin">
						<view class="other-icon" @click="wxLogin">快捷登录</view>					
					</view> -->
					<view class="agreement">
						<radio :checked="agreement" color="#FD5052" @tap="radioChange"/></radio>
						<view class="text-container">
							<text>我已阅读并同意</text>
							<text class="agree" @tap="toAgreementPage('PrivacyAgreement')">《用户隐私协议》</text>
							<text class="agree" @tap="toAgreementPage('UserAgreement')">《平台用户协议》</text>
						</view>
					</view>
				</template>
			</view>
			<!-- <template v-if="type == 'wxlogin'">
				<view class="flex align-center justify-center submit-btns">
					<view class="main-bg-color rounded flex align-center justify-center flex-1"
					hover-class="main-bg-hover-color" @click="submit">
						<text class="text-white font-md">登 录</text>
					</view>				
				</view>			
				<view class="other">					
					<view class="other-icon" @click="wxLogin">快捷登录</view>					
				</view>
			</template>
			<template v-else>
				<view class="flex align-center justify-center submit-btns">
					<view class="main-bg-color rounded flex align-center justify-center flex-1"
					hover-class="main-bg-hover-color" @click="submitRegister">
						<text class="text-white font-md">注 册</text>
					</view>				
				</view>
				<view class="flex align-center submit-btns">
					<view class="register-btn" @click="goLogin">返回登录</view>
				</view>
			</template>
			<view class="agreement">
				<radio :checked="agreement" :value="agreement" color="#FD5052" @tap="radioChange"/></radio>
				<view class="text-container">
					<text style="font-size: 22rpx;">我已阅读并同意</text> <text style="color: #FD5052;" @tap="toAgreementPage()">《用户隐私协议》</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from '@/common/free-lib/util.js';
	export default {
		data() {
			return {
				type:"wxlogin",
				title: '手机号登录',
				subTitle: '未注册的手机号，登录时将自动注册',
				fromPage: undefined,
				show:false,
				screenHeight: 667,
				agreement: false,
				registerForm: {
					mobile: '',
					password: ''
				},
				form:{
					mobile: "",
					code: "",
					password: ''
				}
			}
		},
		onLoad(e) {
			if(e && e.from && e.from != '') {
				this.fromPage = e.from;
				uni.showToast({
					title: '请先登录',
					icon: 'none'					
				});		
			}
		},
		onShow() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight//获取当前页面的高度
		},
		created() {
			let token = $U.getStorage('token')
			// if(!token){
			// 	// 用户未登录
			// 	uni.showToast({ title: '请先登录', icon: 'none' });
			// 	return this.show = true
			// }
			// 用户已登录
			// uni.switchTab({
			// 	url:"/pages/tabbar/index/index"
			// })
		},
		methods: {
			radioChange(evt){
			    let self = this;
			    self.agreement = !self.agreement;
			},
			changeType(){
				this.type = this.type === 'login' ? 'register' : 'login'
				this.form = {
					username:"",
					password:"",
					repassword:""
				}
			},
			submit(){				
				let _this = this;
				if (!_this.agreement) {
					uni.showToast({
						title: '请先阅读并同意本平台的《用户隐私协议》《平台用户协议》',
						icon: 'none'
					});
				}
				else if($U.isValidPhoneNumber(this.form.mobile)) {
					$H.post('/member/auth/login', this.form).then(res => {
						if(res) {	
							$U.setStorage("loginUser", JSON.stringify(res));
							let token = res.accessToken;
							$U.setStorage("token", token);
							if(_this.fromPage == 'notTab') {
								uni.navigateBack({delta: 1})
							}
							else {
								if(_this.fromPage == undefined || _this.fromPage == '' || _this.fromPage == null) {
									_this.fromPage = '/pages/tabbar/index/index';
								}
								uni.switchTab({
									url: _this.fromPage
								})
							}							
						}						
					})
				}
				else {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
				}				
			},
			submitRegister() {
				let _this = this;
				if($U.isValidPhoneNumber(this.registerForm.mobile)) {
					if(this.registerForm.password && this.registerForm.password.length > 4) {
						$H.post('/member/auth/register', this.registerForm).then(res => {
							if(res && res.data == 'success') {							
								_this.goLogin();
							}						
						})
					}
					else {
						uni.showToast({
							title: '密码长度为 4-16 位',
							icon: 'none'
						});
					}
				}
				else {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					});
				}
				
			},
			goLogin() {
				this.type = 'login';
				this.title = '手机号登录';
				this.subTitle = '未注册的手机号，登录时将自动注册';
			},
			register() {
				this.type = 'register';
				this.title = '手机号注册';
				this.subTitle = '';
			},
			wxLogin() {
				let _this = this;
				if (!_this.agreement) {
					uni.showToast({
						title: '请先阅读并同意本平台的《用户隐私协议》《平台用户协议》',
						icon: 'none'
					});
				}
				else {
					let uuid = $U.createUUID();
					uni.login({
					  provider: 'weixin', //使用微信登录
					  success: function (res) {
					    console.log(res);
						if(res && res.code) {
							// if(uni.getUserProfile) {								
							// 	uni.getUserProfile({
							// 	    desc: '获取用户头像和昵称',
							// 		lang: 'zh_CN',
							// 	    success: function (res) {
							// 	        console.log('用户昵称为：', res);
							// 	    },
							// 		fail: function(err) {
							// 			console.log(err)
							// 		}
							// 	});
							// }
							$H.post('/member/auth/social-login', {type: 34, code: res.code, state: uuid, agreement: _this.agreement}).then(res => {
								if(res) {
																										
									$U.setStorage("loginUser", JSON.stringify(res));
									let token = res.accessToken;
									$U.setStorage("token", token);
									if(_this.fromPage == 'notTab') {
										uni.navigateBack({delta: 1})
									}
									else {
										if(_this.fromPage == undefined || _this.fromPage == '' || _this.fromPage == null) {
											_this.fromPage = '/pages/tabbar/index/index';
										}
										uni.switchTab({
											url: _this.fromPage
										})
									}							
								}								
							})
						}
					  }
					});
				}
			},
			toAgreementPage (agreement) {
				switch (agreement) {
					case 'UserAgreement':
						uni.navigateTo({url: '/pages/my/agreement/user-agreement'})
						break
					case 'PrivacyAgreement':
						uni.navigateTo({url: '/pages/my/agreement/privacy-agreement'})
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		padding: 0 60rpx;
		.head {
			padding-top: 164rpx;
			
			.title {
				display: block;
				font-size: 48rpx;
				line-height: 67rpx;
				font-weight: bold;
			}
			.subtitle {
				display: block;
				font-size: 24rpx;
				line-height: 33rpx;
				color: #666666;
				margin-top: 12rpx;
			}
		}
		.body {
			margin-top: 260rpx;
			
			.input-box {
				padding-top: 34rpx;
				height: 42rpx;
				line-height: 42rpx;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #ccc;
				font-size: 30rpx;
				box-sizing: content-box;
				
				.area-code {
					margin-right: 46rpx;
				}
				.phone,.code {
					width: 100%;
				}
				
				.code-btn {
					font-size: 24rpx;
					white-space: nowrap;
					cursor: pointer;
				}
			}
		}
		.submit-btns {
			margin-top: 48rpx;
			height: 90rpx;
			
			.rounded {
				border-radius: 200px;
				height: 90rpx;
				line-height: 90rpx;
			}
			.register-btn {
				cursor: pointer;
				color: rgb(0, 123, 255);
			}
		}
		.wxlogin {
			margin-top: 160rpx;
			
			.text {
				text-align: center;
				line-height: 42rpx;
				font-size: 30rpx;
				color: #999999;
			}
			.other-icon {
				width: 600rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 200px;
				margin: 0 auto;
				margin-top: 20rpx;
				text-align: center;
				color: #fff;
				background-color: #07c160;
			}
		}
		.other {
			margin-top: 160rpx;
			
			.text {
				text-align: center;
				line-height: 42rpx;
				font-size: 30rpx;
				color: #999999;
			}
			.other-icon {
				width: 600rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 200px;
				margin: 0 auto;
				margin-top: 20rpx;
				text-align: center;
				color: #fff;
				background-color: #07c160;
			}
		}
		.agreement {
			width: 100%;
			position: relative;
			display: flex;
			justify-content: center;
			margin-top: 50rpx;
			
			.text-container {
				color: #666666;
				font-size: 24rpx;
			}
			radio {
				width: 53rpx;
				margin-top: -9rpx;
				transform:scale(0.8);
			}
			text {
				color: #27A1D5;
			}
			.agree {
				color: #FD5052 !important;
			}
		}
	}
</style>
